<!DOCTYPE html>
<html lang="en">
<!-- 1.默认情况下，子组件不能直接用父组件的数据 ,既不能直接写成这样 template: '<p>nihao{{data1}}</p>'
    想要使子组件用上父组件的数据，必须使用v-bind绑定自定义属性，并且在属性props里登记该自定义属性
    写组件无论哪种写法，其实就相当于一种，就是名称加上对象
    2.子组件的data数据和props里数据的区别：data里是子组件私有的，props是父组件传递过来的；data里数据是
    可读可写的，props里数据是只读的，无法重新赋值
bug1: Vue.component写成了 vue.component
-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id="a">
        <component1 :b='data1'>
        </component1>
    </div>



    <script>
        new Vue({
            el: '#a',
            data: {
                data1: '要传递给父组件的数据'
            },
            components: {
                component1: {
                    template: '<p>nihao{{b}}</p>',
                    props: ['b']
                }
            }
        })
    </script>

</body>

</html>